<template>
  <div class="box">
    <!-- 头部 -->
    <div class="header">
      <p class="title">购物车</p>
      <div class="right">
        <div class="coupons">领券</div>
        <p>编辑</p>
      </div>
    </div>
    <!-- 商品 -->
    <div class="shops">
      <div class="item" v-for="(item, index) in shopList" :key="item.id">
        <!-- 选中按钮 -->
        <input
          type="checkbox"
          class="checkbox"
          :checked="item.isChecked === 1"
          @change="changeChecked(item.skuId, item.isChecked)"
        />
        <div class="shop">
          <img :src="item.imgUrl" alt="" />
          <!-- 图片左侧数据 -->
          <div class="textData">
            <span class="top">{{ item.skuName }}</span>
            <div class="bottom">
              <span>￥ {{ item.skuPrice }}</span>
              <div class="amount">
                <!-- 减 -->
                <button @click="clickChangeNum(item, -1)">-</button>
                <!-- 输入改变 -->
                <input type="text" :value="item.skuNum" @change="inputUpdate(item, $event)" />
                <!-- 加 -->
                <button @click="clickChangeNum(item, 1)">+</button>
              </div>
            </div>
          </div>
          <div></div>
        </div>
      </div>
    </div>
    <!-- 结算栏 -->
    <div class="settle">
      <div class="leftContent">
        <div class="left">
          <input type="checkbox" class="checkbox" :checked="checkedNum == shopList.length" @change="checkedAll" />
          <span class="txt">已选({{ checkedNum }})</span>
        </div>
        <div class="right">
          <span>合计：￥ {{ total }} </span>
        </div>
      </div>
      <!-- :class="{ acitve: checkedNum.length > 0 }" -->
      <div class="rightContent" :class="{ active: checkedNum > 0 }" @click="goOrder">下单</div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import requests from "@/utils/request";
// 防抖与节流
import throttle from "lodash/throttle";
import debounce from "lodash/debounce";
export default {
  data() {
    return {
      shopNum: 2,
    };
  },
  // 计算属性
  computed: {
    ...mapState({
      shopList: (state) => {
        return state.shopcart.shopList;
      },
    }),
    // 勾选个数
    checkedNum() {
      let num = this.shopList.reduce((pre, item) => {
        return (pre = pre + item.isChecked);
      }, 0);
      return num;
    },
    // 总价
    total() {
      // skuPrice
      return this.shopList.reduce((pre, item) => {
        return (pre = pre + (item.isChecked == 1 ? item.skuPrice : 0) * item.skuNum);
      }, 0);
    },
  },
  methods: {
    // 点击改变勾选状态
    async changeChecked(skuId, isChecked) {
      isChecked = isChecked == 1 ? 0 : 1;

      await requests({ url: `/api/cart/checkCart/${skuId}/${isChecked}`, method: "get" });
      this.$store.dispatch("shopcart/getShopCart");
    },
    // 选择全部
    checkedAll(event) {
      let ischeck = 1;
      if (event.target.checked) {
        ischeck = 0;
      }

      this.shopList.forEach((item) => {
        this.changeChecked(item.skuId, ischeck);
      });
      // 获取购物车内容
      this.$store.dispatch("shopcart/getShopCart");
    },

    // 修改购物车商品数量
    async modifi(skuId, skuNum) {
      await requests({ url: `/api/cart/addToCart/${skuId}/${skuNum}`, method: "post" });
      this.$store.dispatch("shopcart/getShopCart");
    },
    // 点击增加或者减少数量
    clickChangeNum: throttle(function (item, skuNum) {
      if (item.skuNum < 1) return;
      this.modifi(item.skuId, skuNum);
    }, 500),
    // 输入框直接修改数据
    inputUpdate: debounce(function (item, event) {
      if (event.target.value * 1) {
        let num = event.target.value * 1 - item.skuNum;
        this.modifi(item.skuId, num);
      } else {
        this.$store.dispatch("shopcart/getShopCart");
      }
    }, 500),
    // 跳转值支付订单
    goOrder() {
      if (this.checkedNum > 0) {
        this.$router.push({ path: "/order" });
      }
    },
  },
  // 挂载完毕
  mounted() {
    //  派发商品数量
    this.$bus.$emit("shopNum", this.shopNum);
    // 获取购物车内容
    this.$store.dispatch("shopcart/getShopCart");
  },
  // 销毁之前
  beforeDestroy() {
    this.$bus.$emit("shopNum", 0);
  },
};
</script>

<style lang="less" scoped>
.box {
  height: 100%;
  width: 100%;
  overflow-y: auto;
  background-color: #eee;
  .header {
    position: fixed;
    width: 100%;
    height: 50px;
    border-bottom: 1px solid #aaa;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    box-sizing: border-box;
    background-color: #fff;
  }
  .right {
    display: flex;
  }
  /* 领券*/
  .coupons {
    position: relative;
    width: 36px;
    height: 19px;
    background-image: linear-gradient(-45deg, #fc865f 0, #fc625f 100%);
    font-size: 12px;
    color: white;
    line-height: 19px;
    margin-right: 20px;

    &:before {
      content: " ";
      display: block;
      clear: both;
      position: absolute;
      height: 8px;
      width: 8px;
      border-radius: 50%;
      top: 5px;
      left: -5px;
      background-color: white;
    }
    &:after {
      content: " ";
      display: block;
      clear: both;
      position: absolute;
      height: 8px;
      width: 8px;
      border-radius: 50%;
      top: 5px;
      right: -5px;
      background-color: white;
    }
  }
  .shops {
    margin-top: 60px;
    width: 100%;
    background-color: #fff;
    margin-bottom: 110px;
    .item {
      width: 100%;
      height: 133px;
      display: flex;
      align-items: center;
      background-color: #fff;
      padding: 0 20px;
      box-sizing: border-box;

      .checkbox {
        height: 19px;
        width: 19px;
        margin: 0 10px;
      }
      .shop {
        flex: 1;
        width: 221px;
        height: 86px;
        background-color: #eee;
        display: flex;
        align-items: center;
        padding-bottom: 5px;
        border-bottom: 1px solid black;
        img {
          height: 86px;
          width: 86px;
        }
        /*左侧数据*/
        .textData {
          flex: 1;
          height: 100%;
          font-size: 16px;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          /*左侧上方，描述信息*/
          .top {
            margin: 5px 10px;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            text-overflow: ellipsis;
            overflow: hidden;
          }
          /*左侧下方*/
          .bottom {
            height: 26px;

            margin: 5px 10px;
            display: flex;
            justify-content: space-between;
            line-height: 26px;
            .amount {
              display: flex;
              input {
                width: 29px;
                line-height: 29px;
                border-top: 1px solid #ccc;
                border-bottom: 1px solid #aaa;
                text-align: center;
              }
              button {
                width: 29px;
                line-height: 25px;
              }
            }
          }
        }
      }
    }
  }
  /*结算*/
  .settle {
    position: fixed;
    width: 100%;
    height: 60px;
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    bottom: 50px;
    border-top: 1px solid black;
    /* 下单按钮*/
    .rightContent {
      width: 113px;
      height: 60px;
      background-color: #ccc;
      font-size: 16px;
      line-height: 60px;
      color: white;
    }
    .active {
      background-color: red;
    }
    .leftContent {
      display: flex;
      flex: 1;
      justify-content: space-between;
      padding: 0 20px;

      font-size: 16px;
      .left {
        display: flex;
        justify-content: space-between;
        .checkbox {
          width: 19px;
          height: 19px;
          border-radius: 50%;
        }
        .txt {
          margin-left: 10px;
          font-size: 16px;
        }
      }
    }
  }
}
</style>
